<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <input type="button" value="按钮1" class="btn1">
    <input type="button" value="按钮2" class="btn2">
    <input type="button" value="按钮3" class="btn3">
    <div id="box"></div>
</body>
<script>
    const btn1=document.querySelector(".btn1");
    const btn2=document.querySelector(".btn2");
    const btn3=document.querySelector(".btn3");

    // obtn1.onclick = function(){
    //     ajaxPost("http://localhost:3000/api", function(res){
    //         console.log(res)
    //     },{
    //         a:10,
    //         b:20,
    //         c:30,
    //         useranme:"admin"
    //     })
    // }

    btn1.onclick = function(){
        ajaxPost("http://localhost:3000/api",function(res){
            document.getElementById("box").innerHTML=res;
        },{
            qwe:"张新同小帅逼",
            asd:666,
            zxc:"hahah"
        })
    }
    btn2.onclick = function(){
        ajaxPost("http://localhost:3000/api",function(res){
            console.log(res);
        })
    }

    btn3.onclick = function(){
        ajaxPost("http://localhost:3000/api",function(res){
            alert(res);
        },{
            aaa:123,
            bbb:"zxt",
            ccc:"丫丫丫丫"
        })
    }
    function ajaxPost(url,callback,date){
        date=date||{};
        let str="";
        for(let i in date){
            str+=`${i}=${date[i]}&`;
        }
        const xhr=new XMLHttpRequest();
        xhr.open("post",url);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(str.slice(0,str.length-1));
        xhr.onload=function(){
            if(xhr.status===200){
                callback(xhr.responseText)
            }
        }
    }

</script>
</html>